<template>
  <view class="goods-comments">
    <u-navbar :title="`商品评价(990)`" title-color="#000" back-icon-color="#000" :background="background"
      :border-bottom="false">
    </u-navbar>

    <view class="haoping-box">
      <view class="haoping-title">商品好评率97%</view>
      <scroll-view scroll-x class="haoping-list">
        <view class="haoping-item haoping-active">全部</view>
        <view class="haoping-item">香味很正</view>
        <view class="haoping-item">味道足</view>
        <view class="haoping-item">分量多</view>
        <view class="haoping-item">分量多</view>
        <view class="haoping-item">分量多</view>
        <view class="haoping-item">分量多</view>
        <view class="haoping-item">分量多</view>
      </scroll-view>
    </view>

    <mescroll-body ref="mescrollRef" :down="down" @down="downCallback" @up="upCallback">
      <view class="comments-info" v-for="(comment, index) in commentsList" :key="index">
        <view class="u-flex u-row-between u-start">
          <view class="u-flex">
            <view class="u-m-r-26">
              <u-image width="100" height="100" shape="circle" :src="comment.member_face"></u-image>
            </view>
            <view>
              <view>{{ comment.member_name | filterName }}</view>
              <view class="time-info">{{ comment.create_time | date }}</view>
            </view>
          </view>
          <view class="grade-info">
            <!-- <view>{{ comment.grade | filterGrade }}</view> -->
            <u-icon class="u-m-r-4 u-font-10" name="star-fill" color="#EA6625" v-for="(star, starIndex) in comment.grade" :key="starIndex"></u-icon>
          </view>

        </view>

        <view class="u-m-t-25">
          <view class="u-m-b-30 u-line-5">{{ comment.content }}</view>
          <view class="u-flex u-flex-wrap" v-if="comment.images">
            <view class="comment-img u-m-r-15 u-m-b-15" v-for="(img, imgIndex) in comment.images" :key="imgIndex">
              <u-image width="200" height="200" :src="img"
                @click="handlePreviewImage(comment.images, imgIndex)"></u-image>
            </view>
          </view>
        </view>
        <view class="zan-box u-f-ac u-f-jsb u-m-t-10">
          <view>{{comment.goods_name}}</view>
          <view class="u-f-ac">
            <u-icon name="heart"></u-icon>
            <view class="u-m-l-10">330</view>
          </view>
        </view>
        <view class="reply-info" v-if="comment.reply_status === 1 && comment.reply">
          <view class="reply-line u-rela">
            <text class="reply-line-txt u-abso"></text>
          </view>
          <view class="u-p-t-20">
            <text>商家回复：</text>
            <view class="u-line-5">{{ comment.reply.content }}</view>
          </view>
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
  import * as API_Member from '@/api/members.js'
  import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"

  export default {
    mixins: [MescrollMixin],
    data() {
      return {
        goods_id: '',
        params: {
          page_no: 1,
          page_size: 10
        },
        commentsList: [],
        down: {
          auto: false //是否在初始化完毕之后自动执行一次下拉刷新的回调
        },
        background: {
          background: 'rgba(0,0,0,0)',
          // background: 'url(../../../static/images/member/cart-bg.png) no-repeat',
          // backgroundSize: 'cover'
        },
      }
    },
    onLoad(options) {
      this.goods_id = options.goods_id
    },
    filters: {
      /** 评分 */
      filterGrade(val) {
        switch (val) {
          case 'bad':
            return '差评'
          case 'neutral':
            return '中评'
          default:
            return '好评'
        }
      },
      filterName(str) {
        if (str.length >= 10) {
          let changeStr = '****'
          return str.substr(0, 5) + changeStr + str.substr(5 + changeStr.length)
        } else {
          return str
        }
      }
    },
    methods: {
      /** 评分 */
      filterGrade(val) {
        switch (val) {
          case 'bad':
            return 1
          case 'neutral':
            return Math.floor(Math.random() * (4 - 2)) + 2
          default:
            return 5
        }
      },
      //图片预览
      handlePreviewImage(images, index) {
        uni.previewImage({
          current: index,
          urls: images
        })
      },
      //上拉加载数据
      upCallback(page) {
        this.params.page_no = page.num
        this.getGoodsComments()
      },
      //下拉刷新
      downCallback() {
        this.params.page_no = 1
        this.commentsList = []
        this.getGoodsComments()
      },
      // 获取商品评价
      getGoodsComments() {
        API_Member.getGoodsComments(this.goods_id, this.params).then(response => {
          const {
            data
          } = response
          if (data && data.length) {
            data.forEach(item => {
              item.grade = this.filterGrade(item.grade)
            })
            this.commentsList = this.commentsList.concat(data)
          }
          this.mescroll.endBySize(data.length, response.data_total)
        }).catch(error => {
          this.mescroll.endErr()
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    width: 100%;
    background: url(/static/images/member/cart-bg.png) no-repeat 0 0;
    background-size: 100% 400rpx;
    background-color: #f4f4f4;
  }

  .haoping-box {
    .haoping-title {
      font-size: 26rpx;
    }
    .haoping-list {
      margin: 40rpx 0 20rpx;
      white-space: nowrap;
      .haoping-item {
        min-width: 150rpx;
        height: 70rpx;
        line-height: 70rpx;
        text-align: center;
        display: inline-block;
        margin-right: 20rpx;
        border-radius: 50rpx;
        color: #000;
        background: #fff;
        border: 1px solid #fff;
        box-sizing: border-box;
      }
      .haoping-active {
        color: #EA6625;
        background: #FEF3EE;
        border: 1px solid #EA6625;
      }
    }
  }

  .goods-comments {
    padding: 30rpx 30rpx;
    box-sizing: border-box;

    .comments-info {
      background-color: #FFFFFF;
      border-radius: 20rpx;
      padding: 30rpx;
      margin: 30rpx 0;
      box-sizing: border-box;

      .comment-img {
        border-radius: 10rpx;
        overflow: hidden;
      }

      .grade-info {
        // margin: 10rpx 30rpx;
      }
    }

    .time-info,
    .reply-info {
      color: #999999;
      font-size: 24rpx;

      .reply-line {
        height: 2rpx;
        border-top: 2rpx solid #F7F7F7;

        .reply-line-txt {
          top: -24rpx;
          border: 12rpx solid;
          border-color: transparent transparent #F7F7F7;
        }
      }
    }
  }

  .zan-box {
    color: #BFBFBF;
    view {
      font-size: 26rpx;
    }
  }

  .u-start {
    align-items: start;
  }
</style>